<template>
  <div style="width: 100%">
    <el-page-header @back="emit('packConfigBack')">
      <template #content>代理商信息</template>
      <template #default>
        <!-- 查询表单 -->
        <el-form :inline="true" style="margin-top: 30px;">
          <el-form-item label="套餐系列">
            <el-input v-model="series" placeholder="请输入套餐系列" style="width: 20%;margin-right: 20px;" />
            <el-button color="#ea5b24" @click="findAgentPacks()">查询</el-button>
            <el-button color="#ea5b24" @click="addOrUpdateClick()">添加</el-button>
          </el-form-item>
        </el-form>
        <!-- 代理商信息 -->
        <el-descriptions direction="vertical" :column="4" :size="size" style="margin-bottom: 20px;" border>
          <el-descriptions-item label="代理商id">{{ curAgent.agentId }}</el-descriptions-item>
          <el-descriptions-item label="代理商姓名">{{ curAgent.agentName }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ curAgent.mobile }}</el-descriptions-item>
          <el-descriptions-item label="注册日期">{{ curAgent.registerTime }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-page-header>
    <el-table :data="tableData.data" :key="certinKey" v-if="true">
      <el-table-column width="120" prop="packName" label="套餐名称" />
      <el-table-column prop="series" label="套餐系列" />
      <el-table-column prop="carType" label="客货类型">
        <template #default="scope">
          {{ scope.row.carType == null ? '' : scope.row.carType == 0 ? '货车' : '客车' }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="套餐金额" />
      <el-table-column prop="richText" label="套餐富文本" />
      <el-table-column prop="packId" label="搭配会员套餐ID" />
      <el-table-column prop="payRedirectUrl" label="支付后跳转链接" />
      <el-table-column prop="payOrCodeUrl" label="支付后跳转二维码" />
      <el-table-column prop="state" label="状态">
        {{ tableData.state == 0 ? '禁用' : '启用' }}
      </el-table-column>
      <el-table-column width="180" label="操作">
        <template v-slot:default="scope">
          <div class="div-cell">
            <el-button link type="primary" size="small" @click="relieve(scope.row.packId)">解除绑定</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <div style="text-align: center">
      <el-pagination :total="totalNum" @current-change="handleCurrentChange" background :page-size="size"
        layout="prev, pager, next, total" :current-page="page" />
    </div>
  </div>
  <el-dialog v-model="detailShow" style="width: 600px" title="添加">
    <detail-page @addCompleted="addOrUpdateClick" :agentId="curAgent.agentId" v-if="detailShow"></detail-page>
  </el-dialog>
</template>

<script setup lang="ts" >
import { computed, ref, reactive, defineProps, onMounted } from "vue";
import { findAgentPacksApi, relieveApi } from "../../../api/index";
import { ElMessage } from "element-plus";
import detailPage from "./detail.vue";

const detailShow = ref(false)
// 代理商数据
const props = defineProps({
  curAgent: Object,
});
// 系列
const series = ref(null);

//隐藏代理商信息组件
const emit = defineEmits(['packConfigBack']);

// 分页数据
const totalNum = ref(0);
let certinKey = ref(false);
const page = ref("1");
const size = 8;
let tableData: any = reactive([]);

// 翻页
const handleCurrentChange = (val: string) => {
  page.value = val;
  findAgentPacks();
};

// 查询一级代理下绑定的vip套餐
const findAgentPacks = () => {
  if (series.value == '') series.value = null;
  findAgentPacksApi({
    agentId: props.curAgent.agentId,
    series: series.value,
    page: Number(page.value),
    size: size,
  }).then((res) => {
    if (res.data.data) {
      if (res.data.code === 2000) {
        tableData.data = res.data.data.data;
        totalNum.value = res.data.data.total;
      } else {
        ElMessage.error("查询失败");
      }
    }
  });
};

// 解除一级代理和vip套餐的绑定
const relieve = (packId: number) => {
  relieveApi({
    agent_id: props.curAgent.agentId,
    pack_id: packId,
  }).then((res) => {
    if (res.data.code === 2000) {
      ElMessage({
        message: "解绑成功.",
        type: "success",
      });
      findAgentPacks();
    } else {
      ElMessage.error("解绑失败");
    }
  });
};
function addOrUpdateClick() {
  //隐藏添加界面
  detailShow.value = !detailShow.value;
  //重新加载数据
  findAgentPacks();
}

onMounted(() => {
  findAgentPacks();
});
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
</style>